<template>
    <div class="container mt-5">
      <h1 class="text-center mb-4">删除电影</h1>
      <form @submit.prevent="deleteMovie" class="mb-4">
        <div class="mb-3">
          <label for="movieCode" class="form-label">电影代码：</label>
          <input
            type="text"
            id="movieCode"
            v-model="movieCode"
            class="form-control"
            placeholder="请输入电影代码"
            required
          />
        </div>
        <button type="submit" class="btn btn-danger">删除</button>
      </form>
  
      <!-- 反馈效果 -->
      <div v-if="message" class="alert" :class="isSuccess ? 'alert-success' : 'alert-danger'">
        <i v-if="isSuccess" class="fas fa-check-circle me-2"></i>
        <i v-else class="fas fa-times-circle me-2"></i>
        {{ message }}
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'DeleteMovie',
    setup() {
      const movieCode = ref(''); // 电影代码
      const message = ref(''); // 操作提示信息
      const isSuccess = ref(false); // 操作是否成功
  
      // 删除电影的函数
      const deleteMovie = async () => {
        if (!movieCode.value) {
          message.value = '请输入电影代码。';
          isSuccess.value = false;
          return;
        }
  
        try {
          // 调用后端 API 删除电影
          const response = await fetch(`http://127.0.0.1:8000/api/del_movie?n=${movieCode.value}`);
          const data = await response.json();
  
          if (data.success) {
            message.value = '操作成功：电影已删除。';
            isSuccess.value = true;
            movieCode.value = ''; // 清空输入栏
          } else {
            message.value = data.message;
            isSuccess.value = false;
          }
        } catch (error) {
          message.value = `请求失败：${error.message}`;
          isSuccess.value = false;
        }
  
        // 3 秒后清空提示信息
        setTimeout(() => {
          message.value = '';
        }, 3000);
      };
  
      return {
        movieCode,
        message,
        isSuccess,
        deleteMovie,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 自定义样式（可选） */
  .container {
    max-width: 600px;
  }
  </style>